<template>
    <div>
        <div class="w100 h50"></div>
        <div class="container vux-1px-t">
            <span v-for="(item,index) in data" :key="index" :class="active==index && 'active'" @click="loadPage(item.loadSrc)">
                <img :src="data[index][active==index?'active':'noActive']" class="w18 h18" />
                <span>{{item.name}}</span>
            </span>
        </div>
    </div>
</template>
<script>
export default {
    name:'botNavigation',
    data(){
        return {
            money:'',
            active:0,
            data:[{
                loadSrc:'',
                active:require('../../../images/home.png'),
                noActive:require('../../../images/home2.png'),
                name:'首页'
            },{
                loadSrc:'classification',
                active:require('../../../images/app store2.png'),
                noActive:require('../../../images/app store.png'),
                name:'分类'
            },{
                loadSrc:'shopcart',
                active:require('../../../images/cart2@2x.png'),
                noActive:require('../../../images/cart.png'),
                name:'购物车'
            },{
                loadSrc:'personalCenter',
                active:require('../../../images/user2.png'),
                noActive:require('../../../images/user.png'),
                name:'我的'
            }]
        }
    },
    created(){
        let path = this.$route.path;
        this.active = path == '/'?0:path=="/classification"?1:path=='/shopcart'?2:path=='/personalCenter'?3:0;
    },
    methods:{
        loadPage(url){
            this.$router.push({path:"/" + url});
        }
    },
    watch: {
        // $route(to, from) {
        //     let path = '/' + to.name;
        //     this.active = path == '/'?0:path=="/classification"?1:path=='/shopcart'?2:path=='/personalCenter'?3:0;
        // }
    }
}
</script>
<style lang="less" scoped>
.container{
    height:5rem;
    width:100%;
    position:fixed;
    bottom:0rem;
    left:0rem;
    right:0rem;
    z-index:11;
    background-color:white;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    font-size:1.4rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
    &>span{
        display:flex;
        height:100%;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        width:25%;
        &>img{
            margin-bottom:.3rem;
        }
        &>span{
            margin-top:.3rem;
        }
        &.active{
            font-weight:bold;
            color:#fd3b2f;
        }
    }
}
</style>

